<template>
	<view class="mainpadding">
		<view class="flexright">
			<view class="rili" @click="tzdaka">
				<image src="../static/image/system/rili.png" mode=""></image>
			</view>
		</view>
		<view class="margin_top2 jfbox dingwei">
			<image src="../static/image/system/jifen.png" mode=""></image>
			<view class="neirong">
				<view class="flexbetween">
					<view class="xiaobai ershiba fonweight">积分总额</view>
					<view class="xiaobai strongtext nofonweight">消费的过多，提升的越快</view>
				</view>
				<view class="margin_top4 bigtbtext">{{userInfo.score}}
					<text class="sanshier xiaobai fonweight">积分</text>
				</view>
				<view class="flexleft margin_top1" @click="tzckmx">
					<view class="xiaobai ershiba fonweight">积分明细</view>
					<u-icon name="arrow-right" color="#fff" size="14"></u-icon>
				</view>
			</view>
		</view>
		<!-- bannr -->
		<view class="margin_top">
			<u-swiper :list="list1" circular height="100px"  @click="tzlbxq"></u-swiper>
		</view>
		<view class="margin_top">
			<u-tabs :list="list3" lineColor="#1BA95B" @click="changetab" :activeStyle="{
				    color: '#1BA95B',
				    fontWeight: 'bold',
				    transform: 'scale(1.05)'
				}" :inactiveStyle="{
				            color: '#000000',
							fontWeight: '400',
				            transform: 'scale(1)'
				        }" itemStyle="padding-left: 5px; padding-right: 10px; height: 44px;"></u-tabs>
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimage" style="margin-top: 300rpx;" ></view>
			</view>
			<view class="" v-if="currenttabtow == 0">
				<view class="flexbetween flex_wrap">
					<view class="wushiym margin_top" v-for="item in list.data" @click="tzspxq(item.id)">
						<view class="">
							<view class="spslt">
								<image :src="item.image_text" mode=""></image>
							</view>
							<view class="mainpadding2s baibox ffffff">
								<view class="ershiba xiaohei nofonweight yhxk">{{item.name}}</view>
								<view class="flexleft margin_top1">
									<view class="sanshier xiaohong fonweight">{{item.score}}</view>
									<view class="strongtext xiaohong nofonweight">分</view>
									<view class="sanshier xiaohong fonweight" v-if="Number(item.price)">+￥{{item.price}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="currenttabtow == 1">
				<view class="xiahuaxian margin_top" v-for="item in list.data" :key="item.id" @click="tzxq(5,item.id)">
					<view class="flexbetween">
						<view class="shilitu">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="" style="width: 69%;">
							<view class="titletext xiaohei fonweight yhxk">{{item.name}}</view>
							<view class="smalltext xiaohui nofonweight margin_top2 yhxk">{{item.kc_des}}</view>
							<view class="flexbetween margin_top2">
								<view class="flexleft">
									<view class="sanshier xiaohong fonweight">{{item.priceinfo.score}}</view>
									<view class="strongtext xiaohong nofonweight">分</view>
									<view class="sanshier xiaohong fonweight" v-if="Number(item.priceinfo.price)">+￥{{item.priceinfo.price}}</view>
								</view>
								<view class="xiaohongbtnty">立即兑换</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				list3: [{
						name: '商品',
						value: 1,
					},
					{
						name: '课程',
						value: 2
					}
				],
				currenttabtow: 0,
				userInfo: {},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				bannerList:[],
				list1:[]
			}
		},
		onLoad() {
			this.init()
			this.getbanner()
		},
		onShow() {
			this.userinfomsg()
			
		},
		methods: {
			// 跳转轮播详情
			tzlbxq(e) {
				uni.navigateTo({
					url: '/pages_homepage/bannerxq?id=' + this.bannerList[e].id
				})
			},
			getbanner() {
				httpRequest.request('/api/index/getAdvertiseList', 'POST', {
					advertise_position_id: 6,
					is_more: 1
				}, false, false, true).then(res => {
					res.data.forEach(item => {
						this.list1.push(item.image_text)
					})
					this.bannerList = res.data
				})
			},
			init(isPage, page) {
				let _this = this;
				let data = {
					page: page || 1,
					limit: _this.limit
				}
				let url = '/api/scoregoods/scoreGoodsIndex'
				if(this.currenttabtow==1){
					url = '/api/kccl/kcIndex'
					this.$set(data,"kc_attr",5)
				}
				httpRequest.request(url, 'GET', data, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			userinfomsg() {
				httpRequest.request('/api/user/index', 'GET', {}).then(res => {
					this.userInfo = res.data
				})
			},
			// 跳转课程兑换
			tzxq(type,id) {
				uni.navigateTo({
					url: '/pages_homepage/kechenggmxq?type=' + type+"&id="+id
				})
			},
			// 跳转商品详情
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_mypage/shangpinxq?id='+id
				})
			},
			// 跳转打卡
			tzdaka() {
				uni.navigateTo({
					url: '/pages_mypage/dakalingjf'
				})
			},
			changetab(e) {
				this.currenttabtow = e.index;
				this.init()
			},
			// 跳转明细
			tzckmx() {
				uni.navigateTo({
					url: '/pages_mypage/mingxi'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		width: 2rpx;
		height: 24rpx;
		background: #EEEEEE;
	}

	.xiaolvbtn {
		width: 112rpx;
		height: 56rpx;
		background: #1BA95B;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shilitu {
		width: 200rpx;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.wushiym {
		width: 48%;
	}

	page {

		background: #F9F9F9;
	}

	.baibox {
		border-radius: 0rpx 0rpx 16rpx 16rpx;
	}

	.spslt {
		width: 100%;
		height: 332rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;

		image {
			border-radius: 16rpx 16rpx 0rpx 0rpx;
			width: 100%;
			height: 100%;
		}
	}

	.baner {
		width: 100%;
		height: 160rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.neirong {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		width: 90%;
	}

	.bigtbtext {
		font-size: 48rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.jfbox {
		width: 100%;
		height: 260rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.rili {
		width: 40rpx;
		height: 40rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>